<template>
  <div style="width: 1000px;">
    <el-row :gutter="10" style="width: 100%;">
      <el-col :span="16">
        <div style="background-color: white;height: 100%;">
          <div class="setup">
            <h3 style="color: black;margin: 0 0 10px 0">账号与密码</h3>
            <span style="font-size: 14px">账号设置/个性域名</span>
          </div>

          <div class="setup">
            <h4 style="color: black;margin: 0 0 10px 0">账号设置</h4>
            <span>绑定手机和邮箱，并设置密码，账号更安全<br>
                  注意：为保证账号安全，需进行二次验证。</span>
          </div>

          <div class="setup">
            <el-row :gutter="20">
             <el-col :span="22">
               <p style="color: black;margin-bottom: 10px">密码</p>
               <span>{{ user.password }}</span>
             </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <p style="color: black;margin-bottom: 10px">绑定手机</p>
                <span>{{ user.phone }}</span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <p style="color: black;margin-bottom: 10px">绑定邮箱</p>
                <span>{{ user.email }}</span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">账号设置</h4>
                <span>个人主页的地址，个性域名只可更改一次<br>
                  zhihu.com/people/lun-luo-shi-jian</span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
<!--        <div style="background-color: white;height: 100%">-->

<!--        </div>-->
        <div style="border: 1px solid #e9e9eb;background-color: white">
          <div style="height: 100%;padding: 20px">
            <h3 style="color: black;margin: 0 0 10px 0">常见问题</h3>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">账号和密码</p>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="1.为什么要进行二次验证？" name="1">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 二次验证可以有效防止盗号，维护号主自身权益。在修改密码、换绑手机、换绑邮箱前需统一验证，通过后 30 分钟内无需再次验证。
                </div>
              </el-collapse-item>
              <el-collapse-item title="2.二次验证的手机/邮箱不可用？" name="2">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 点此进行 <span class="question">账号找回</span>
                </div>
              </el-collapse-item>
              <el-collapse-item title="3.忘记密码怎么办？" name="3">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 已绑定手机/邮箱，点此 <span class="question">密码找回</span> <br>
                  &nbsp;&nbsp;&nbsp;&nbsp; 绑定手机已停用，点此 <span class="question">账号找回</span>
                </div>
              </el-collapse-item>
              <el-collapse-item title="4.手机丢失，手机号不可用怎么办？" name="4">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 绑定手机已停用，点此 <span class="question">账号找回</span>
                </div>
              </el-collapse-item>
              <el-collapse-item title="5.要绑定的手机号提示我已经注册了？" name="5">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 通过手机号+验证码的形式登录确认是否为自己的账号 <br>
                  &nbsp;&nbsp;&nbsp;&nbsp; 如该手机号近期进行过绑定操作，则 180 天内无法再次执行绑定、换绑操作
                </div>
              </el-collapse-item>
            </el-collapse>

            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">其他问题</p>
            <p class="question">6.网站出现了问题？<span style="color: #1989fa">问题反馈</span></p>
            <p class="question">7.账号如何注销？<span style="color: #1989fa">问题反馈</span></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";

const user=ref({password:'未设置',phone:'+86 186****0613',email:'未绑定'});
</script>

<style scoped>
.setup{
  height: 80px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;
}
span{
  font-size: 14px;
}
p{
  color: #056DE8;
  cursor: pointer;
}
.question{
  font-size: 15px;margin: 20px 0 0 0;
  color: #8493a5;
  cursor: pointer;
  font-size: 13px;
}
.question:hover{
  color: #056DE8;
}
.repasswrod:hover{
  color: #056DE8;
}
span{
  font-size: 14px;
}
</style>